<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        .list::-webkit-scrollbar { display: none; }
        .list { display: flex; border-top: 1px solid #eee; border-bottom: 1px solid #eee; overflow-y: hidden;}
        /* 自动右边缘定位 */
        .scroll-snap { scroll-snap-type: x mandatory; }
        .space { flex: 0 0 4rem; }
        [data-type="danger"] { background-color: #eb4646; }
        [data-type="warning"] { background-color: #f59b00; }
        /* 多个按钮定位 */
        .button:nth-of-type(2) { right: 4rem; }
        .button:nth-of-type(3) { right: 8rem; }
        .space:nth-child(4) { flex: 0 0 8rem; }
        .space:nth-child(5) { flex: 0 0 12rem; }
        .perspective { perspective: 1px; transform-style: preserve-3d; perspective-origin: 100% 50%; }
        .perspective .button:last-of-type { transform: translate3D(2rem, 0, -1px) scale(2); }
        .perspective .button:first-of-type { transform: translate3D(2rem, 0, -3px) scale(4); }
    </style> -->
    <!-- flex-grow, flex-shrink 和 flex-basis -->
    <style>
        body{
            margin: 0;
        }
        .list::-webkit-scrollbar { display: none; }
        .list { display: flex; border-top: 1px solid #eee; border-bottom: 1px solid #eee; overflow-y: hidden;}
        .content { padding: .5rem 1rem; line-height: 1.5; flex: 0 0 calc(100vw - 2rem); font-size: 1rem; color: inherit; background-color: #fff; position: relative; }
        .space { flex: 0 0 4rem; }
        [data-type="danger"] { background-color: #eb4646; }
        [data-type="warning"] { background-color: #f59b00; }
        /* 自动右边缘定位 */
        .scroll-snap { scroll-snap-type: x mandatory; }
        .scroll-snap .space { scroll-snap-align: end; }
        .scroll-snap .content { scroll-snap-align: start; }
        /* 多个按钮定位 */
        .button { border: 0; padding: 0; font-size: 1rem; color: #fff; width: 4rem; height: 2.5rem; position: absolute; right: 0; outline: 0; }
        .button:nth-of-type(2) { right: 4rem; }
        .button:nth-of-type(3) { right: 8rem; }
        .space:nth-child(4) { flex: 0 0 8rem; }
        .space:nth-child(5) { flex: 0 0 12rem; }
        /* 视差滚动 */
        /* .perspective { perspective: 1px; transform-style: preserve-3d; perspective-origin: 100% 50%; }
        .perspective .button:last-of-type { transform: translate3D(2rem, 0, -1px) scale(2); }
        .perspective .button:first-of-type { transform: translate3D(2rem, 0, -3px) scale(4); } */
    </style>
</head>
<body>
    <h4>4. 多个按钮定位视差滚动</h4>
    <div class="list scroll-snap perspective">
        <button class="button" data-type="danger">删除</button>
        <button class="button" data-type="warning">不显示</button>
        <a href="javascript:" class="content">我是列表，试试左滑我</a>
        <s class="space"></s>
    </div>
</body>
</html>